<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //目标对象

        const user = {
            name:'小胖',
            age:12,
            wife:{
                name:"小朱",
                age:19
            }
        }
        //把目标对象变成代理对象
        //参数1:user------>target目标
        //参数2:handler----->处理器对象,用来监视数据,以及数据的操作
        const proxyUser = new Proxy(user,{
            // 获取目标对象的某个属性值
            get(target,prop){
                console.log('get方法调用了');
                return Reflect.get(target,prop)
            },
            //修改目标对象的属性值/为目标对象添加新的特性
            set(target,prop,val){
                console.log('set方法调用了');
                return Reflect.set(target,prop,val)
            },
            // 删除目标对象上的某个属性
            deleteProperty(target,prop){
                console.log('delete方法调用了');
                return Reflect.deleteProperty(target,prop)
            },
        })
        console.log(proxyUser);
        // 通过代理对象获取目标对象中的某个属性值
        console.log(proxyUser.name);
        //通过代理对象获取目标对象中的某个属性值
        proxyUser.name = '我已经变了'
        console.log(user);
        //通过代理对象向目标对象中添加一个新的属性
        proxyUser.gender = '男'
        console.log(user);
        delete proxyUser.name 
        console.log(user);
        //更新目标对象中的某个属性对象中的属性值
        proxyUser.wife.name = '小胖'
    </script>
</body>
</html>